import React, { useState, useEffect } from 'react';
import { Button, Spin, Alert, Table, Form, Select } from 'dingtalk-design-desktop';
import FormItem from 'dingtalk-design-desktop/lib/form/FormItem';
import { useDocument, useDocumentEvents } from '../hooks/doc';
import { getLocale } from './locales'; 
import { initView, } from 'dingtalk-docs-cool-app';
import { useRecord } from '../hooks/record';
import { useField } from '../hooks/field';
const FindDuplicate: React.FC = () => {
     const locale = getLocale('zh-CN');
 

  const { fields,  setFields,  loadFields,} = useField();
  const { records, loadRecords,} = useRecord();


   const markTypeOptions = [
    { label: '标记全部', value: '标记全部' },
    { label: '首项不标记', value: '首项不标记' },
    { label: '末项不标记', value: '末项不标记' },
  ];

  const [form] = Form.useForm<{ idFieldsInput: string; secFieldsInput:string;markType: string }>();

  useEffect(() => {
     loadFields();
  }, [setFields]);
 

  const submitForm =async (values: any) => {
    const {idFieldsInput,secFieldsInput} = values;
    if(idFieldsInput===undefined || idFieldsInput===''){
      alert('请选择字段');
      return;
    }
     if(idFieldsInput=== secFieldsInput){
      alert('字段一和字段二不能相同');
      return;
     }
     alert('正在查找，请稍后...');
       await loadRecords();
      alert('记录数'+records.length);
};


  return (
    <div style={{ padding: '20px' }}>
     <Form onFinish={submitForm} form={form} layout="vertical"> 
      <FormItem label="标识字段一" required key="idFieldsInput" name="idFieldsInput">
        <Select
          placeholder="请选择"
          style={{ width: '100%' }}
        > 
       { fields.map((field) => (
          <Select.Option value={field.name} key={field.id}>{field.name}</Select.Option>
        ))
      }
        </Select>
      </FormItem>
       <FormItem label="标识字段二"   key="secFieldsInput" name="secFieldsInput">
        <Select
          placeholder="请选择"
          style={{ width: '100%' }}
        > 
       { fields.map((field) => (
          <Select.Option value={field.name} key={field.id}>{field.name}</Select.Option>
        ))
      }
      </Select>
      </FormItem>
      <FormItem label="标识方式" required key="markType" name="markType">
        <Select 
          placeholder="请选择"
          style={{ width: '100%' }}
          options={markTypeOptions}
        > 
        </Select>
      </FormItem>
        <Form.Item wrapperCol={{ span: 18, offset:6 }}>
          <Button size="large" type="primary" htmlType="submit">
            查找
          </Button>
        </Form.Item>
     </Form>
       
      
    </div>
  );
};

export default FindDuplicate;